<script lang="ts" setup>
import { useRoute } from 'vue-router'
import { getDetail } from '../../api/detail'
import { reactive, ref } from 'vue'
import type { Ref } from 'vue'
import { iDetail } from './detailType'
import { showImagePreview, showToast } from 'vant';
import { useUserInfoStore } from '../../stores/userInfo'
import router from '../../router'

import { getCartList, addCartFn } from '../../api/cart'

const user = useUserInfoStore()

const route = useRoute()



// 用来获取 params 传递的参数
// console.log(route.params.proid);


const state: {
    detail: iDetail
} = reactive({
    detail: {} as iDetail
})

// console.log(route.query);
getDetail(route.query.proid).then(res => {

    res.data.data.banners = res.data.data.banners[0].split(',')
    // console.log(res.data.data);

    setTimeout(() => {
        state.detail = res.data.data
    }, 500);

})

// ----------------------- 图片预览 -----------------------
const currentCount: Ref<number> = ref(0)

function showImage() {
    // 打开图片预览
    showImagePreview({
        images: state.detail.banners,
        startPosition: currentCount.value,
        onChange(index: number) {
            currentCount.value = index
        },
        // onClose(obj) {
        //     console.log(obj);
        //     currentCount.value = obj.index
        // }

    })
}
// 该函数会在轮播图每次切换后回调的函数，有一个参数为当前索引值
function changeImage(index: number) {
    // console.log(index);
    // 记录当前索引值
    setTimeout(() => {
        currentCount.value = index
    }, 200);

}

// ---------------------- 视频播放 ---------------------
const show = ref(false)
const videoRef = ref()
function videoClick() {
    show.value = true
    // 继续视频播放
    videoRef.value.play()
}
function stopFn() {
    // 关闭遮罩层的方法
    show.value = false

    // 暂停视频的播放
    videoRef.value.pause()
}

// ------------------- 在线客服 ---------------------
function showPanel() {

    if (user.loginState) {
        // 登录了
        window._MEIQIA('showPanel');

        // 传递顾客信息
        window._MEIQIA('metadata', {
            name: '智子', // 美洽默认字段
            address: '半人马座阿尔法星', // 美洽默认字段
            aaa: 'bla bla bla', // 自定义字段
            xyz: 'lalala' // 自定义字段
        });
    } else {
        // 没有登录
        router.push({
            // name: 'login'
            path: '/login'
        })
    }
}

// ------------- 购物车列表
const num = ref(0)
getCartList({
    userid: user.userid
}).then(res => {
    // console.log(res.data.data.length);
    num.value = res.data.data.length
})

// -------------- 添加购物车
function addCart() {
    if (user.loginState) {
        // 登录了
        // 可以加入购物车
        addCartFn({
            num: 1,
            userid: user.userid,
            proid: route.query.proid as string
        }).then(res => {
            showToast(res.data.message)

            // 重新获取购物车列表
            getCartList({
                userid: user.userid
            }).then(res => {
                // console.log(res.data.data.length);
                num.value = res.data.data.length
            })
        })
    } else {
        // 没有登录
        router.push({
            // name: 'login'
            path: '/login'
        })
    }
}


</script>
<template>
    <div class="box">
        <header class="header">
            <span @click="$router.back()" class='left'>
                &lt;
                返回
            </span>
            详情
        </header>

        <!-- 骨架屏 -->
        <div v-if="!state.detail.brand" style="padding-top: 60px;">
            <van-skeleton>
                <template #template>
                    <div :style="{ display: 'flex', width: '100%' }">
                        <van-skeleton-image />
                        <div :style="{ flex: 1, marginLeft: '16px' }">
                            <van-skeleton-paragraph row-width="60%" />
                            <van-skeleton-paragraph />
                            <van-skeleton-paragraph />
                            <van-skeleton-paragraph />
                        </div>
                    </div>
                </template>
            </van-skeleton>
            <van-skeleton title avatar :row="3" />
            <br>
            <br>
            <van-skeleton title :row="3" />
            <br>
            <br>
            <van-skeleton>
                <template #template>
                    <div :style="{ display: 'flex', width: '100%' }">
                        <van-skeleton-image />
                        <div :style="{ flex: 1, marginLeft: '16px' }">
                            <van-skeleton-paragraph row-width="60%" />
                            <van-skeleton-paragraph />
                            <van-skeleton-paragraph />
                            <van-skeleton-paragraph />
                        </div>
                    </div>
                </template>
            </van-skeleton>
        </div>

        <div v-else class="content">

            <div class="my-detail-swipe">
                <!-- 轮播图代码 -->
                <van-swipe :initial-swipe="currentCount" @change="changeImage" class="my-swipe" @click="showImage"
                    :autoplay="3000" indicator-color="#f66">
                    <van-swipe-item v-for="item in state.detail.banners" :key="item">
                        <van-image class="swipe-image" :src="item" />
                    </van-swipe-item>
                </van-swipe>

                <div class="page" v-if="state.detail.banners">
                    {{ currentCount + 1 }} / {{ state.detail.banners.length }}
                </div>

                <div class="video-btn" @click="videoClick">
                    <van-icon size="30" name="play" />
                </div>
            </div>

            <!-- 用来显示其余数据用的 -->
            <div class="cell">
                <h2> {{ state.detail.proname }} </h2>
                <p>
                    <span style="color: red;"> 活动价格： {{ state.detail.originprice * state.detail.discount * 0.1 }}</span>
                    <del> 原价: ￥{{ state.detail.originprice }} </del>
                </p>
                <p> 品牌： {{ state.detail.brand }} </p>
                <p> 分类： {{ state.detail.category }} </p>
                <p class="desc"> {{ state.detail.desc }} </p>
            </div>


            <!-- 遮罩层 -->
            <van-overlay :show="show" @click="stopFn">
                <template #default>
                    <video class="my-video" autoplay ref="videoRef" controls
                        src="https://jvod.300hu.com/vod/product/f9332310-339c-4880-9d05-c7f27fceb61b/6bdcd1f5531c4b78a68f2d12e1204200.mp4"></video>
                </template>
            </van-overlay>

            <!-- 动作栏 -->
            <van-action-bar>
                <van-action-bar-icon @click="showPanel" icon="chat-o" text="客服" dot />
                <van-action-bar-icon icon="cart-o" text="购物车" :badge="num" />
                <van-action-bar-icon icon="shop-o" text="店铺" badge="12" />
                <van-action-bar-button type="warning" @click="addCart" text="加入购物车" />
                <van-action-bar-button type="danger" text="立即购买" />
            </van-action-bar>

        </div>
    </div>
</template>
<style lang="scss" scoped>
.header {
    .left {
        float: left;
        padding-left: 10px;
    }
}

.my-swipe {
    height: 420px;
    line-height: 420px;

    .swipe-image {
        width: 100%;
        height: 100%;
    }
}

.cell {
    height: 3500px;
    padding: 12px;
}

.desc {
    line-height: 30px;
    font-size: 14px;
}

.my-detail-swipe {
    position: relative;

    .page {
        position: absolute;
        right: 0;
        bottom: 26px;
        background-color: white;

    }

    .video-btn {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 26px;
        background-color: #f66;
        color: white;
        width: 50px;
        height: 30px;
        text-align: center;
        border-radius: 15px;
    }
}

.my-video {
    position: fixed;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
}
</style>